
<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase3,
  tableBase1,
  tableBase2,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  startTime: "",
  endTime: "",
  userName: "",
  userId: "",
};

export default {
  name: "specialdel",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      rebase: formBase,
      requestConfig1: {
        url: "/base/customerNewReport/queryShopAddedUserNum",
        method: "get",
        montage: true,
      },
      requestConfig2: {
        url: "/base/customerNewReport/queryShopUserFirstOrderSummary",
        method: "get",
        montage: true,
      },
      requestConfig3: {
        url: "/base/customerNewReport/queryShopUserFirstOrderDetail",
        method: "get",
        montage: true,
      },
      selectionArr3: [], // 多选框内容
      selectionArr1: [], // 多选框内容
      selectionArr2: [], // 多选框内容
      tableSearchForm: { ...defaultForm },
      tableSearchForm3: { ...defaultForm },
      activeName: "1",
    };
  },
  methods: {
    tableBase1() {
      return tableBase1;
    },
    tableBase2() {
      return tableBase2;
    },
    tableBase3() {
      return tableBase3;
    },
    // 导出2
    async downLoad2() {
      if (this.selectionArr2.length > 0) {
        const ids = this.selectionArr2.map((item) => {
          return item.userId;
        });
        this.download(
          "/base/customerNewReport/export/summary",
          {
            ids,
          },
          `客户新增报表统计_${dayjs().format("YYYY-MM-DD HH:mm:ss")}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    },
    // 导出3
    async downLoad3() {
      if (this.selectionArr3.length > 0) {
        console.log("this.selectionArr3", this.selectionArr3);
        const ids = this.selectionArr3.map((item) => {
          console.log("item", item);
          return item.id;
        });
        console.log("ids", ids);
        this.download(
          "/base/customerNewReport/export/detail",
          {
            ids,
          },
          `客户新增报表详细_${dayjs().format("YYYY-MM-DD HH:mm:ss")}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    },
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    CustomDoubleClick(row) {
      this.tableSearchForm3 = { ...this.tableSearchForm, userId: row.userId };
      this.$nextTick(() => this.$refs.table3.getListData());
    },
  },
  watch: {
    propsSearchForm: {
      deep: true,
      handler: function (value) {
        this.tableSearchForm = { ...value };
        delete this.tableSearchForm.shelfTime;
        // 日期
        if (!value?.shelfTime?.length) {
          this.tableSearchForm.startDate = "";
          this.tableSearchForm.endDate = "";
        } else if (value?.shelfTime?.length) {
          this.tableSearchForm.startDate = dayjs(value.shelfTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.tableSearchForm.endDate = dayjs(value.shelfTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      },
    },
  },
};
</script>

<template>
  <div>
    <div class="h-[130px] overflow-auto">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
      @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button
                type="success"
                @click="$refs[`table${activeName}`].getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="downLoad2"
                >导出统计表</el-button
              >
              <el-button type="primary" @click="downLoad3"
                >导出详细表</el-button
              >
            </div>
          </div>
        </template>
      </dmb-form>
    </div>

    <div class="h-[100vh-130px] overflow-auto">
      <el-tabs type="border-card" v-model="activeName" class="h-[100vh-130px]">
        <el-tab-pane name="1" label="各店铺新增会员数">
          <dmb-table
            ref="table1"
            :CustomDoubleClick="true"
            :prop-list="tableBase1()"
            :show-index-column="true"
            select-column-type="CHECKBOX"
            :req-request="requestConfig1"
            select-key="id"
            :cell-style="cellStyle"
            :header-cell-style="headerCellStyle"
            :initialize="false"
            :change-search-form="false"
            :show-footer="true"
            :form-item-style="tableFormStyle"
            @selectionChange="
              (row) => {
                selectionArr1 = row;
              }
            "
          />
        </el-tab-pane>
        <el-tab-pane name="2" label="各店铺会员首单统计">
          <div>
            <div class="font-600 mb-4">双击左边表格的一行，可以查看明细</div>
            <div class="overflow-auto flex">
              <div class="son mr-4 shadow-gray-500/50 shadow-md">
                <dmb-table
                  ref="table2"
                  :CustomDoubleClick="true"
                  @CustomDoubleClick="CustomDoubleClick"
                  :prop-list="tableBase2()"
                  :show-index-column="true"
                  select-column-type="CHECKBOX"
                  :props-search-form="tableSearchForm"
                  :req-request="requestConfig2"
                  select-key="id"
                  :cell-style="cellStyle"
                  :header-cell-style="headerCellStyle"
                  :initialize="false"
                  :change-search-form="false"
                  :show-footer="true"
                  :form-item-style="tableFormStyle"
                  @selectionChange="
                    (row) => {
                      selectionArr2 = row;
                    }
                  "
                />
              </div>
              <div class="son shadow-gray-500/50 shadow-md">
                <dmb-table
                  ref="table3"
                  :CustomDoubleClick="true"
                  :prop-list="tableBase3()"
                  :show-index-column="true"
                  select-column-type="CHECKBOX"
                  :props-search-form="tableSearchForm3"
                  :req-request="requestConfig3"
                  select-key="id"
                  :cell-style="cellStyle"
                  :header-cell-style="headerCellStyle"
                  :initialize="false"
                  :change-search-form="false"
                  :show-footer="true"
                  :form-item-style="tableFormStyle"
                  @selectionChange="
                    (row) => {
                      selectionArr3 = row;
                    }
                  "
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.son {
  overflow: auto;
}
ul {
  list-style: none;
  display: flex;
  li {
    margin: 10px;
  }
}
</style>
